/* eslint-disable @typescript-eslint/no-explicit-any */
// import { ReactComponent } from "@dev-crafter/react-shared";
import React from "react";
import { forwardRef, memo, useMemo } from "react";
import { ReactComponent } from "../../types";

export function mapComponent(WrappedComponent: ReactComponent, maps: { [key: string]: string }): ReactComponent {

  return memo(forwardRef<HTMLElement>((props: any, ref) => {
    const mapedProps = useMemo(() => {
      const newProps = {} as any;
      const keys = Object.keys(props || {})
      const mapValues = Object.values(maps)
      const _newKeys = keys.filter(key => !mapValues.includes(key))
      for (const key of _newKeys) {
        if (maps[key]) {
          newProps[maps[key]] = props?.[key]
        } else {
          newProps[key] = props?.[key]
        }
      }
      return newProps
    }, [props])

    return (
      <WrappedComponent ref={ref} {...mapedProps} />
    )
  }))
}